<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../node_modules/layui/src/css/layui.css">
  <script src="../node_modules/layui/src/layui.js"></script>
</head>
<body>
    <!-- <div class="layui-container" style="background-color:navajowhite;height: 300px;"></div> -->
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md5" style="background-color: navajowhite;">
                5555555
            </div>

            <div class="layui-col-md7" style="background-color: navy;">
                7777777
            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-md4" style="background-color: olive;">
                5555555
            </div>

            <div class="layui-col-md4" style="background-color: orangered;">
                7777777
            </div>

            <div class="layui-col-md6" style="background-color: bisque;">
                7777777
            </div>
        </div>

        <h3>列间距</h3>
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md4">
                <div style="background-color: red;">4</div>
            </div>

            <div class="layui-col-md4">
                <div style="background-color: black;">4</div>
            </div>
        </div>

        <h3>列偏移</h3>
        <div class="layui-row">
            <div class="layui-col-md4">
                <div style="background-color: red;">4</div>
            </div>

            <div class="layui-col-md4 layui-col-md-offset2">
                <div style="background-color: black;">
                    向右移动四列
                </div>
            </div>
        </div>

        <h3>列嵌套</h3>
        <div class="layui-row">
            <div class="layui-col-md6">
                <div style="background-color:red">
                    <div class="layui-row">
                        <div class="layui-col-md4">
                            <div style="background-color: blue;">
                                四列
                            </div>
                        </div>
            
                        <div class="layui-col-md4">
                            <div style="background-color: blueviolet;">
                                四列
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div style="background-color: violet;">
                                四列
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>



    </div>
</body>
</html>